<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/x-loading.css" rel="stylesheet">

    <title>Document</title>

</head>

<body>
    <div id="app" >

        
        
        <button type="button" class="btn btn-primary my-3 me-2" @click="openAdd">新增</button>
        
        
            <table class="table">
                <thead>
                    <tr>
                        
                        <th>编号</th>
                        <th>原网址</th>
                        <th>短网址</th>                       
                       
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="url in urlList">
                        
                        <td>{{url.url_id}}</td>
                        <td style="width:600px;word-break:break-all">                            
                            {{url.url_src}}   
                        </td>
                        <td>
                            <a :href="'/url/'+url.url_short" target="_blank">{{'/url/'+url.url_short}}</a>
                        </td>
                        
                    </tr>
                </tbody>
            </table>
        

        <!-- 新增弹窗 -->
        <x-dialog v-model="visible">
            
            <div class="mb-3">
                <label class="form-label">请输入原网址</label>
                <textarea type="text" class="form-control" rows="5" v-model="addData.url_src"></textarea>
            </div>
            
            <div style="text-align: right;">
                <button type="button" class="btn btn-primary btn-lg" style="width:200px;" @click="execAdd">提交</button>
            </div>

        </x-dialog>

        

    </div>


    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script><!-- ajax的封装组件 -->
    <script src="js/x-dialog.js"></script>
    <script src="js/sweetalert2.all.min.js"></script>
    <script src="js/x-loading.js"></script>
    <script src="js/my.js"></script>

    <script>
        //定义vue的配置对象
        const cfg = {
            setup() {//Vue对象的初始化方法

                // ref负责需要整体替换的数据，reactive负责仅仅改变属性的数据(取reactive封装的响应数据不需要 通过 .value)

                const visible = Vue.ref(false)

               

                const urlList = Vue.ref([]);

                //定义查询数据的函数
                const getPage = () => {

                    ajax(
                        myAxios.get('/url'),
                        result =>{
                            urlList.value = result.data;
                        }
                    );

                   
                };

                getPage();

                



                //新增数据
                const addData = Vue.reactive({
                    url_src: ''
                });

                //打开新增窗口
                const openAdd = () => {

                    //清除窗口数据
                    addData.url_src = '';


                    visible.value = true;
                };

                const execAdd = () => {
                    Swal.fire({
                        title: '您确认新增短网址吗？',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#0B5ED7',
                        cancelButtonColor: '#AAAAAA',
                        confirmButtonText: '确认',
                        cancelButtonText: '取消'
                    }).then((result) => {
                        if (result.isConfirmed) {//确认后的逻辑

                            ajax(
                                myAxios.post('/url', addData),
                                result=>{
                                    getPage();//刷新数据
                                    visible.value = false;//关闭窗口
                                },
                                "新增短网址成功！"
                            );

                           
                        }
                    })
                };

                


                



                return {
                    //导出数据，只有导出的才能和页面产生响应式效果
                    urlList,                    
                    getPage,

                    visible,
                    addData,
                    execAdd,
                    openAdd,
                    
                };
            }
        };

        //创建Vue对象,并且和页面上id为app的元素进行绑定(挂载),自此id为app的元素将由vue对象进行渲染
        Vue.createApp(cfg).use(XDialog).mount("#app");



    </script>

</body>

</html>